
<template>
    <div class="normal-container">
        <div v-if="!showDetail">
            <div class="normal-text">{{ $route.name }}</div>
            <div class="content-main">
                <section>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="端子型号">
                            <el-input v-model="formInline.norm" placeholder="请输入端子型号" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="制造编号">
                            <el-input v-model="formInline.code" placeholder="请输入制造编号" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="getList(true)">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="showDetail = true">新增</el-button>
                        </el-form-item>
                        <el-upload :headers="headers" class="upload-demo" :limit="1" ref="targetUpload"
                            :action="this.$http + `/mold/mold/impInfo`" :on-success="handleSuccess" accept=".xls,.xlsx"
                            style="display: none;" :on-error="errorInfo">
                        </el-upload>
                        <el-popover placement="top-start" trigger="hover">
                            <button class="buttonDownload" @click="downModel">下载上传模板</button>
                            <el-button class="noraml-btn" @click="clickUp" slot="reference"
                                style="margin-left: 10px;margin-right: 15px;margin-top: 3px;">导入EXCEL</el-button>
                        </el-popover>
                        <el-form-item>
                            <el-button class="noraml-btn" @click="Export"
                                v-loading.fullscreen.lock="fullscreenLoading">导出EXCEL</el-button>
                        </el-form-item>

                    </el-form>
                </section>
                <section>
                    <el-table v-loading="loading" ref="tableMain" :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%"
                        :max-height="tableHeight">
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column prop="type" label="类别"></el-table-column>
                        <el-table-column prop="code" label="制造编号"></el-table-column>
                        <el-table-column prop="norm" label="端子型号"></el-table-column>
                        <el-table-column prop="manufacturer" label="生产商"></el-table-column>
                        <el-table-column prop="num" label="数量"></el-table-column>
                        <el-table-column prop="entryDate" label="入厂日期"></el-table-column>
                        <el-table-column prop="life" label="使用年限"></el-table-column>
                        <el-table-column prop="userDepar" label="使用部门"></el-table-column>
                        <el-table-column prop="maxNext" label="最大压接次数"></el-table-column>
                        <el-table-column prop="serInter" label="保养周期"></el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                        <el-table-column prop="" label="附件">
                            <template slot-scope="scope">
                                <img @click="showSerInter = true; id = scope.row.id" v-if="scope.row.sum"
                                    src="@/assets/icon/文件.png" style="cursor: pointer;" alt="">
                                <img v-else src="@/assets/icon/附件-灰色.png" style="cursor: not-allowed;" alt="">

                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" fixed="right" width="100">
                            <template slot-scope="scope">
                                <div class="is-useing" v-if="scope.row.status">在用</div>
                                <div class="is-no-seing" v-else>报废</div>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="160">
                            <template slot-scope="scope">
                                <el-tooltip content="报废" placement="top-start" effect="light">
                                    <img @click="messageDialog = true; scrapId = scope.row.id"
                                        src="@/assets/icon/icon-报废.png" style="margin-right: 10px;cursor: pointer;" alt="">
                                </el-tooltip>
                                <el-tooltip content="修改" placement="top-start" effect="light">
                                    <img @click="clickDetail(scope.row)" src="@/assets/icon/列表icon-修改.png"
                                        style="margin-right: 10px;cursor: pointer;" alt="">
                                </el-tooltip>
                                <el-tooltip content="删除" placement="top-start" effect="light">
                                    <img @click="clickDelete(scope.row)" src="@/assets/icon/列表icon-删除.png"
                                        style="cursor: pointer;" alt="">
                                </el-tooltip>

                            </template>
                        </el-table-column>
                    </el-table>
                </section>
                <section style="text-align:center;padding-top:20px">
                    <el-pagination background @current-change="handleCurrentChange" :page-size="pageForm.size"
                        :current-page="pageForm.current" layout="prev, pager, next" :total="total">
                    </el-pagination>
                </section>
            </div>
        </div>
        <formItem v-if="showDetail" :id="id" :options="options" @closeDetail="closeDetail"></formItem>
        <el-dialog class="messageDialog" title="" :visible.sync="messageDialog" width="500px">
            <div style="text-align: center;">
                <span style="font-size: 20px;color: #3F3F3F;">系统提示</span>
                <div style="margin-top: 30px;display: flex;text-align: center;margin-left: 30px;">
                    <div>
                        <img style="vertical-align: middle;" src="@/assets/icon/系统提示-提示.png" alt=""><span
                            style="margin-left: 10px;font-size: 17px;color: #000;">确定要将此模具报废吗？</span>
                    </div>
                </div>
                <div class="dialog-footer" style="margin-top: 30px;text-align: right;">
                    <el-button class="noraml-btn" @click="messageDialog = false">取 消</el-button>
                    <el-button class="noraml-btn" type="primary" @click="save">确 定</el-button>
                </div>
            </div>
        </el-dialog>
        <serInterItem v-if="showSerInter" :genre="0" :showSerInter="showSerInter" :id="id"
            @closeSerInter="showSerInter = false; id = ''"></serInterItem>
    </div>
</template>
  
<script>
import axios from "axios";
import Cookies from 'js-cookie';
import formItem from './components/formItem.vue';
import serInterItem from '@/components/serInterDialog.vue'
export default {
    components: { formItem, serInterItem },

    data() {

        return {
            showSerInter: false,
            scrapId: '',
            options: [],
            messageDialog: false,
            headers: {},
            showDetail: false,
            total: 0,
            loading: false,
            formInline: {
                code: '',
                norm: '',
                genre: 0
            },
            pageForm: {
                current: 1,
                size: 20
            },
            tableData: [],
            id: "",
            tableHeight: 500,
            fullscreenLoading: false,
        }
    },
    computed: {
        listenHeight() {
            return this.$store.state.user.heightSize
        }
    },
    watch: {
        listenHeight(val) {
            if (!this.showDetail) {
                const tableHeight = document.documentElement.clientHeight;
                const topHeight = this.$refs.tableMain.$el.getBoundingClientRect().top + 115;
                this.tableHeight = tableHeight - topHeight;
            }

        }
    },
    mounted() {
        // 上传请求头
        this.headers[Cookies.get('tokenNameEqu')] = Cookies.get('tokenValueEqu');

        this.getList();
        this.$nextTick(res => {
            const tableHeight = document.documentElement.clientHeight;
            const topHeight = this.$refs.tableMain.$el.getBoundingClientRect().top + 115;
            this.tableHeight = tableHeight - topHeight;
        })
    },
    methods: {
        Export() {
            this.fullscreenLoading = true;
            this.methExportExcel("post", "/mold/mold/expInfo", this.formInline, "模具台账").then((res) => {
                this.fullscreenLoading = res;
            });

        },
        downModel() {
            let names = Cookies.get('tokenNameEqu');
            let value = Cookies.get('tokenValueEqu');
            let params = {};
            params[names] = value;
            axios({
                method: 'get',
                url: this.$http + '/mold/ledger-file/downTemp/MoldMold',
                responseType: "blob",
                headers: params,
            }).then((res) => {
                const aEle = document.createElement("a");
                const href = window.URL.createObjectURL(res.data);
                aEle.href = href;
                aEle.download = '模具台账.xlsx';
                document.body.appendChild(aEle);
                aEle.click();
                document.body.removeChild(aEle);
                window.URL.revokeObjectURL(href);
                this.$message.success("下载成功")
            })

        },
        handleSuccess(res) {
            if (res.code == 200) {
                this.fullScreenLoading = false;
                this.$message.success('导入成功');
                this.getList(true);
            } else {
                this.fullScreenLoading = false;
                this.$message.warning(res.msg);
            };
            this.$refs.targetUpload.clearFiles()
        },
        errorInfo(res) {
            this.fullScreenLoading = false;
            this.$message.warning('上传失败');
            this.$refs.targetUpload.clearFiles()
        },
        clickUp() {
            document.querySelector(".el-upload").click();
        },

        save() {
            this.$baseRequest('/mold/mold/scrap/' + this.scrapId, {}, {}, 'delete').then(res => {
                this.$message({
                    type: 'success',
                    message: '报废成功!'
                });
                this.getList();
            })
            this.messageDialog = false;
        },
        clickDelete(item) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$baseRequest('/mold/mold/delete/' + item.id, {}, {}, 'delete').then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                })
            })
        },
        clickDetail(item) {
            this.id = item.id;
            this.showDetail = true;
        },
        closeDetail(isFresh) {
            if (isFresh) this.getList();
            this.showDetail = false;
            this.id = '';
        },
        getList(isClear) {
            this.loading = true;
            if (isClear) this.pageForm.current = 1; // 点击搜索
            this.$baseRequest("/mold/mold/pageList", this.formInline, this.pageForm, "post").then(
                (res) => {
                    this.tableData = res.data.records;
                    this.total = Number(res.data.totalRow);
                    this.loading = false;
                }
            ).catch(res => {
                this.loading = false;
            })
        },
        handleCurrentChange(val) {
            this.pageForm.current = val;
            this.getList();
        },
    }
}
</script>
  
<style lang="scss" scoped>
.content-main {
    border: 1px solid #DFE2E8;
    padding: 30px;
    background-color: #fff;
}

.is-useing {
    color: #00B42A;
    position: relative;
}

.is-useing::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 40%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #00B42A;
}

.is-no-seing {
    color: #FF7D00;
    position: relative;
}

.is-no-seing::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 40%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #FF7D00;
}

.buttonDownload {
    display: inline-block;
    position: relative;
    padding: 10px 25px;
    background-color: #4975D7;
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    font-size: 0.9em;
    text-align: center;
    text-indent: 15px;
    border: none;
    cursor: pointer;
}

.buttonDownload:hover {
    background-color: #4975D7;
    color: white;
}

.buttonDownload:before,
.buttonDownload:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 15px;
    top: 52%;
}

.buttonDownload:before {
    width: 10px;
    height: 2px;
    border-style: solid;
    border-width: 0 2px 2px;
}

.buttonDownload:after {
    width: 0;
    height: 0;
    margin-left: 1px;
    margin-top: -7px;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: transparent;
    border-top-color: inherit;
    animation: downloadArrow 1s linear infinite;
    animation-play-state: paused;
}

.buttonDownload:hover:before {
    border-color: #cdefbd;
}

.buttonDownload:hover:after {
    border-top-color: #cdefbd;
    animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
        margin-top: -7px;
        opacity: 1;
    }

    0.001% {
        margin-top: -15px;
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        margin-top: 0;
        opacity: 0.4;
    }
}
</style>
  